<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-once>{{msg1}}</div>
        <div v-text="msg1" v-once></div>
    </div>
    <script>
        //数据的响应式（数据的变化会导致页面内容的变化）
        //数据绑定 ：将数据填充到标签中
        //v-once 只编译一次 显示内容之后不再具有响应式
        //v-once应用场景：如果显示的信息后续不需要再修改，就可以使用v-once来提高性能
        var vm = new Vue({
           //el 元素的挂载位置（值可以是css选择器或者DOM元素）
           el:'#app',
           //data：模型数据（值是一个对象）
           data:{
                msg:'hello Vue',
                msg1:'v-once只编译一次'
           }
       })
    </script>
</body>
</html>